<!--首页组件-->
<template>
  <div
    class="home"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-immediate-check="false"
    infinite-scroll-distance="10"
  >
    <div class="content">
      <div class="slider-bg"></div>

      <!--轮播图-->
      <swiper :imgList="imgList" :isfull="true"></swiper>
      <!--九宫格功能图标展示区-->
      <ul class="box-list">
        <li v-for="item in tabsList" :key="item.name" class="item">
          <router-link :to="{ name: item.name }" class="title">
            <img :src="item.img_src" class="media-icon" />
            <div class="media-body">{{ item.title }}</div>
          </router-link>
        </li>
      </ul>

      <main-seconds-kill :endTime="endTime"></main-seconds-kill>

      <div class="goods-box">
        <media
          v-for="item in feedsList"
          v-bind="item"
          :key="Number(item.id) + Math.random() * 993132"
        ></media>
      </div>
      <div v-show="isLoading" class="loading-tips">
        <div>
          <mt-spinner type="fading-circle"></mt-spinner>
          <span style="margin-left: 4px">加载中……</span>
        </div>
      </div>
    </div>
    <back-top :element="scrollBoxEle"></back-top>
  </div>
</template>

<script>
import swiper from "components/content/Swiper.vue";
import MainSecondsKill from "components/common/MainSecondsKill.vue";
import Media from "components/common/Media.vue";
import BackTop from "components/common/BackTop.vue";

export default {
  data() {
    return {
      scrollBoxEle: "",
      endTime: 1690866353345, // 活动结束时间
      isLoading: true,
      pageNum: 1,
      pageCount: 20,
      feedsList: [],
      imgList: [], //返回值保存图片地址的数组,
      tabsList: [
        {
          name: "news",
          img_src: require("assets/images/home/menu1.png"),
          title: "新闻资讯",
        },
        {
          name: "photo",
          img_src: require("assets/images/home/menu2.png"),
          title: "图片分享",
        },
        {
          name: "category",
          img_src: require("assets/images/home/menu3.png"),
          title: "商品购买",
        },
        {
          name: "message",
          img_src: require("assets/images/home/menu4.png"),
          title: "留言反馈",
        },
        {
          name: "video",
          img_src: require("assets/images/home/menu5.png"),
          title: "视频专区",
        },
        {
          name: "profileInfo",
          img_src: require("assets/images/home/menu6.png"),
          title: "我的设置",
        },
        {
          name: "logistics",
          img_src: require("assets/images/home/menu7.png"),
          title: "物流查询",
        },
        {
          name: "digital",
          img_src: require("assets/images/home/menu8.png"),
          title: "数码电器",
        },
      ],
    };
  },
  created() {
    this.getImgList();
    this.getFeedsList(this.pageNum, this.pageCount);
  },
  mounted() {
    this.scrollBoxEle = document.querySelector(".home");
  },
  methods: {
    getImgList() {
      this.imgList = [
        { id: 1, img: require("assets/images/photo/shangpin(1).jpg") },
        { id: 2, img: require("assets/images/photo/shangpin(2).jpg") },
        { id: 3, img: require("assets/images/photo/shangpin(3).jpg") },
        { id: 4, img: require("assets/images/photo/shangpin(4).jpg") },
        { id: 5, img: require("assets/images/photo/shangpin(5).jpg") },
        { id: 6, img: require("assets/images/photo/shangpin(6).jpg") },
        { id: 7, img: require("assets/images/photo/shangpin(7).jpg") },
      ];
    },

    // 获取猜用户喜爱
    getFeedsList(pageNum, pageCount) {
      if (!this.isLoading) return;
      this.$http({
        url: `/get?func=item_rec&recpos=6163&pagenum"%3A${pageNum}%2C"pagecount"%3A${pageCount}%2C"cid3"%3A""%7D`,
      }).then((res) => {
        let { content } = res.data.feeds;
        this.feedsList.push(...content);
        this.isLoading = false;
      });
    },

    // 加载更多
    loadMore() {
      this.isLoading = true;
      setTimeout(() => {
        this.getFeedsList(this.pageNum++, this.pageCount);
      }, 2000);

      // console.log("到底啦");
    },
  },
  components: {
    swiper,
    MainSecondsKill,
    Media,
    BackTop,
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.home .content {
  margin-left: 8px;
  margin-right: 8px;
}
.mint-swipe {
  margin-top: 20px;
}
.slider-bg {
  background-image: linear-gradient(0deg, #b1deff, #26a2ff 50%);
  position: absolute;
  top: 0;
  left: -25%;
  height: 7.25rem;
  width: 150%;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

.box-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-around;
  text-align: center;
}
.box-list .item {
  margin-bottom: 10px;
}
.box-list .media-icon {
  width: 42px;
  margin-bottom: 3px;
}
.box-list .media-body {
  font-size: 13px;
  color: var(--gray);
}

.goods-box {
  // height: 850px;
  // overflow-y: auto;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  padding: 0 5px;
}

.loading-tips /deep/ > div {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: var(--gray);
}
</style>
